<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>暖心点评 - 暖言树洞</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="page">
        <!-- Header -->
        <div class="page-header">
            <button class="header-back">
                <i class="fas fa-arrow-left"></i>
            </button>
            <h1 class="header-title">暖心点评</h1>
            <div class="text-xs text-neutral-600">
                传递温暖
            </div>
        </div>

        <!-- Main Content -->
        <div class="page-content">
            <!-- Original Diary -->
            <div class="card mb-6 bg-gradient-to-r from-neutral-50 to-primary-50">
                <div class="flex items-center mb-3">
                    <i class="fas fa-quote-left text-primary mr-2"></i>
                    <span class="text-sm font-medium text-primary">来自漂流瓶的心情</span>
                </div>
                <div class="flex items-start mb-4">
                    <span class="mood-emoji">🎉</span>
                    <div class="flex-1">
                        <div class="text-sm text-neutral-600 mb-2">匿名用户A · 30分钟前</div>
                        <p class="text-base leading-relaxed text-neutral-700" id="originalContent">
                            今天收到了一个意外的好消息，感觉整个世界都亮了起来！虽然之前一直很担心，但是结果比预期的还要好。生活真的充满了惊喜，要学会相信美好的事情会发生。
                        </p>
                    </div>
                </div>
                <div class="warmth-indicator">
                    <i class="fas fa-heart icon-sm text-secondary"></i>
                    <span class="text-sm">15人给予了暖心</span>
                </div>
            </div>

            <!-- Comment Templates -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-magic mr-2 text-primary"></i>
                    快速点评模板
                </h3>
                <div class="grid grid-cols-1 gap-3">
                    <button class="template-btn" onclick="selectTemplate(this)">
                        <i class="fas fa-heart mr-2 text-secondary"></i>
                        <span>你不是一个人，我们都在默默支持你</span>
                    </button>
                    <button class="template-btn" onclick="selectTemplate(this)">
                        <i class="fas fa-sun mr-2 text-warning-500"></i>
                        <span>明天会更好的，相信美好的事情会发生</span>
                    </button>
                    <button class="template-btn" onclick="selectTemplate(this)">
                        <i class="fas fa-hug mr-2 text-primary"></i>
                        <span>给你一个大大的拥抱，你很棒！</span>
                    </button>
                    <button class="template-btn" onclick="selectTemplate(this)">
                        <i class="fas fa-star mr-2 text-warning-500"></i>
                        <span>你的分享给了我很多正能量，谢谢你</span>
                    </button>
                    <button class="template-btn" onclick="selectTemplate(this)">
                        <i class="fas fa-hands-helping mr-2 text-success-500"></i>
                        <span>虽然是陌生人，但我真心为你感到高兴</span>
                    </button>
                </div>
            </div>

            <!-- Comment Input -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-pen mr-2 text-primary"></i>
                    写下你的暖心话语
                </h3>
                <div class="input-group">
                    <textarea 
                        id="commentInput"
                        class="input-field textarea-field" 
                        placeholder="在这里写下你想对TA说的温暖话语...

真诚的鼓励和支持是最好的暖心良药。你的每一句话都可能成为别人黑暗中的光。"
                        maxlength="200"
                    ></textarea>
                    <div class="flex justify-between items-center mt-2">
                        <div class="input-helper">真诚的话语最能传递温暖</div>
                        <div class="text-xs text-neutral-500" id="commentCharCounter">0/200</div>
                    </div>
                </div>

                <!-- Emoji Selector -->
                <div class="mt-4">
                    <div class="text-sm font-medium text-neutral-700 mb-2">添加表情</div>
                    <div class="flex flex-wrap gap-2">
                        <button class="emoji-btn" onclick="addEmoji(this)" data-emoji="❤️">❤️</button>
                        <button class="emoji-btn" onclick="addEmoji(this)" data-emoji="🤗">🤗</button>
                        <button class="emoji-btn" onclick="addEmoji(this)" data-emoji="💪">💪</button>
                        <button class="emoji-btn" onclick="addEmoji(this)" data-emoji="🌟">🌟</button>
                        <button class="emoji-btn" onclick="addEmoji(this)" data-emoji="☀️">☀️</button>
                        <button class="emoji-btn" onclick="addEmoji(this)" data-emoji="🌈">🌈</button>
                        <button class="emoji-btn" onclick="addEmoji(this)" data-emoji="🌸">🌸</button>
                        <button class="emoji-btn" onclick="addEmoji(this)" data-emoji="🍀">🍀</button>
                        <button class="emoji-btn" onclick="addEmoji(this)" data-emoji="🎉">🎉</button>
                        <button class="emoji-btn" onclick="addEmoji(this)" data-emoji="🙏">🙏</button>
                    </div>
                </div>
            </div>

            <!-- Warmth Level -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-thermometer-half mr-2 text-primary"></i>
                    暖心程度
                </h3>
                <div class="warmth-selector">
                    <div class="flex justify-between mb-3">
                        <span class="text-sm text-neutral-600">为这篇日记的暖心程度打分</span>
                        <span class="text-sm font-medium text-primary" id="warmthLabel">很暖心 (4星)</span>
                    </div>
                    <div class="flex justify-center gap-2 mb-3">
                        <button class="warmth-star-btn" onclick="selectWarmth(1)" data-level="1">
                            <i class="fas fa-star"></i>
                        </button>
                        <button class="warmth-star-btn" onclick="selectWarmth(2)" data-level="2">
                            <i class="fas fa-star"></i>
                        </button>
                        <button class="warmth-star-btn" onclick="selectWarmth(3)" data-level="3">
                            <i class="fas fa-star"></i>
                        </button>
                        <button class="warmth-star-btn active" onclick="selectWarmth(4)" data-level="4">
                            <i class="fas fa-star"></i>
                        </button>
                        <button class="warmth-star-btn" onclick="selectWarmth(5)" data-level="5">
                            <i class="fas fa-star"></i>
                        </button>
                    </div>
                    <div class="text-xs text-center text-neutral-500">
                        你的评分将帮助优质内容获得更多展示机会
                    </div>
                </div>
            </div>

            <!-- Preview -->
            <div class="card mb-6 bg-secondary-50">
                <h3 class="font-semibold mb-3 flex items-center">
                    <i class="fas fa-eye mr-2 text-secondary"></i>
                    点评预览
                </h3>
                <div class="flex items-start">
                    <div class="w-8 h-8 bg-gradient-to-br from-primary-400 to-secondary-400 rounded-full flex items-center justify-center text-white text-sm mr-3">
                        我
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-medium text-neutral-700">我的暖心点评</span>
                            <div class="warmth-stars" id="previewStars">
                                <i class="fas fa-star warmth-star text-xs"></i>
                                <i class="fas fa-star warmth-star text-xs"></i>
                                <i class="fas fa-star warmth-star text-xs"></i>
                                <i class="fas fa-star warmth-star text-xs"></i>
                                <i class="far fa-star text-neutral-300 text-xs"></i>
                            </div>
                        </div>
                        <div class="bg-white rounded-lg p-3">
                            <p class="text-sm text-neutral-700 leading-relaxed" id="previewContent">
                                在这里写下你想对TA说的温暖话语...
                            </p>
                        </div>
                        <div class="text-xs text-neutral-500 mt-1">
                            刚刚 · 匿名点评
                        </div>
                    </div>
                </div>
            </div>

            <!-- Rewards Info -->
            <div class="card bg-primary-50">
                <div class="flex items-start">
                    <i class="fas fa-gift text-primary mr-3 mt-1"></i>
                    <div class="flex-1">
                        <h4 class="font-medium text-sm mb-2 text-primary">点评奖励</h4>
                        <ul class="text-xs text-neutral-700 space-y-1">
                            <li>• 发布点评：+5 暖心币</li>
                            <li>• 获得点赞：+2 暖心币/次</li>
                            <li>• 入选每日精选：+20 暖心币</li>
                            <li>• 助人指数提升：解锁更多公益项目</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Actions -->
        <div class="page-footer p-4">
            <div class="flex gap-3">
                <button type="button" class="btn btn-outline flex-1" onclick="history.back()">
                    <i class="fas fa-times mr-2"></i>
                    取消
                </button>
                <button type="button" class="btn btn-primary flex-1" id="sendCommentBtn">
                    <i class="fas fa-heart mr-2"></i>
                    发送暖心
                </button>
            </div>
        </div>
    </div>

    <script src="js/app.js"></script>
    <script>
        // 点评页面管理器
        class CommentPageManager {
            constructor() {
                this.selectedWarmth = 4;
                this.init();
            }

            init() {
                this.bindEvents();
                this.updatePreview();
                this.loadDiaryData();
            }

            bindEvents() {
                const commentInput = document.getElementById('commentInput');
                const charCounter = document.getElementById('commentCharCounter');
                const sendBtn = document.getElementById('sendCommentBtn');

                // 输入框事件
                commentInput.addEventListener('input', () => {
                    const count = commentInput.value.length;
                    charCounter.textContent = `${count}/200`;
                    
                    if (count > 200) {
                        charCounter.style.color = 'var(--error-500)';
                        commentInput.style.borderColor = 'var(--error-500)';
                    } else {
                        charCounter.style.color = 'var(--neutral-500)';
                        commentInput.style.borderColor = 'var(--neutral-300)';
                    }
                    
                    this.updatePreview();
                });

                // 发送按钮事件
                sendBtn.addEventListener('click', this.handleSendComment.bind(this));
            }

            updatePreview() {
                const commentInput = document.getElementById('commentInput');
                const previewContent = document.getElementById('previewContent');
                const previewStars = document.getElementById('previewStars');
                
                // 更新预览内容
                const content = commentInput.value.trim();
                if (content) {
                    previewContent.textContent = content;
                } else {
                    previewContent.textContent = '在这里写下你想对TA说的温暖话语...';
                    previewContent.style.color = 'var(--neutral-400)';
                    return;
                }
                previewContent.style.color = 'var(--neutral-700)';

                // 更新预览星级
                this.updateStars(previewStars, this.selectedWarmth);
            }

            updateStars(container, level) {
                const stars = container.querySelectorAll('i');
                stars.forEach((star, index) => {
                    if (index < level) {
                        star.className = 'fas fa-star warmth-star text-xs';
                    } else {
                        star.className = 'far fa-star text-neutral-300 text-xs';
                    }
                });
            }

            loadDiaryData() {
                // 从URL参数获取日记ID
                const urlParams = new URLSearchParams(window.location.search);
                const diaryId = urlParams.get('diary');
                
                if (diaryId) {
                    console.log('加载日记数据:', diaryId);
                    // 这里可以根据ID加载具体的日记数据
                }
            }

            handleSendComment() {
                const commentInput = document.getElementById('commentInput');
                const content = commentInput.value.trim();
                
                if (!content) {
                    App.utils.showToast('请输入点评内容', 'warning');
                    commentInput.focus();
                    return;
                }
                
                if (content.length > 200) {
                    App.utils.showToast('点评内容不能超过200字', 'error');
                    commentInput.focus();
                    return;
                }
                
                const sendBtn = document.getElementById('sendCommentBtn');
                
                // 显示发送状态
                sendBtn.disabled = true;
                sendBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>发送中...';
                
                // 模拟发送过程
                setTimeout(() => {
                    // 提交点评数据
                    const commentData = {
                        content: content,
                        warmthLevel: this.selectedWarmth,
                        timestamp: Date.now()
                    };
                    
                    if (window.App) {
                        App.forms.submitComment('diary001', content, this.selectedWarmth);
                    }
                    
                    // 显示成功消息
                    App.utils.showToast('暖心点评发送成功！+5 暖心币', 'success');
                    
                    // 跳转回漂流页面
                    setTimeout(() => {
                        window.location.href = 'drift.html';
                    }, 1500);
                }, 1500);
            }
        }

        // 全局函数
        function selectTemplate(button) {
            const text = button.querySelector('span').textContent;
            const commentInput = document.getElementById('commentInput');
            
            // 如果输入框为空，直接插入模板
            // 如果有内容，在末尾添加模板
            if (commentInput.value.trim()) {
                commentInput.value += '\n\n' + text;
            } else {
                commentInput.value = text;
            }
            
            // 触发输入事件更新计数器和预览
            commentInput.dispatchEvent(new Event('input'));
            
            // 添加选中效果
            button.style.animation = 'pulse 0.5s ease';
            setTimeout(() => {
                button.style.animation = '';
            }, 500);
        }

        function addEmoji(button) {
            const emoji = button.dataset.emoji;
            const commentInput = document.getElementById('commentInput');
            
            // 在光标位置插入emoji
            const start = commentInput.selectionStart;
            const end = commentInput.selectionEnd;
            const before = commentInput.value.substring(0, start);
            const after = commentInput.value.substring(end);
            
            commentInput.value = before + emoji + after;
            commentInput.setSelectionRange(start + emoji.length, start + emoji.length);
            
            // 触发输入事件
            commentInput.dispatchEvent(new Event('input'));
            commentInput.focus();
            
            // 添加动画效果
            button.style.transform = 'scale(1.2)';
            setTimeout(() => {
                button.style.transform = 'scale(1)';
            }, 150);
        }

        function selectWarmth(level) {
            const buttons = document.querySelectorAll('.warmth-star-btn');
            const label = document.getElementById('warmthLabel');
            
            // 更新按钮状态
            buttons.forEach((btn, index) => {
                if (index < level) {
                    btn.classList.add('active');
                } else {
                    btn.classList.remove('active');
                }
            });
            
            // 更新标签
            const labels = {
                1: '一般 (1星)',
                2: '还好 (2星)',
                3: '暖心 (3星)',
                4: '很暖心 (4星)',
                5: '超暖心 (5星)'
            };
            label.textContent = labels[level];
            
            // 更新管理器状态
            if (window.commentManager) {
                commentManager.selectedWarmth = level;
                commentManager.updatePreview();
            }
        }

        // 初始化页面
        let commentManager;
        document.addEventListener('DOMContentLoaded', function() {
            commentManager = new CommentPageManager();
        });
    </script>

    <style>
        /* 模板按钮样式 */
        .template-btn {
            display: flex;
            align-items: center;
            width: 100%;
            padding: var(--spacing-3);
            background: white;
            border: 1px solid var(--neutral-200);
            border-radius: var(--rounded-lg);
            text-align: left;
            transition: all var(--transition-normal);
            cursor: pointer;
        }

        .template-btn:hover {
            border-color: var(--primary-300);
            background: var(--primary-50);
        }

        .template-btn span {
            font-size: var(--text-sm);
            color: var(--neutral-700);
        }

        /* Emoji按钮样式 */
        .emoji-btn {
            width: 40px;
            height: 40px;
            border: 1px solid var(--neutral-200);
            border-radius: var(--rounded-lg);
            background: white;
            font-size: 1.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all var(--transition-normal);
            cursor: pointer;
        }

        .emoji-btn:hover {
            border-color: var(--primary-500);
            background: var(--primary-50);
        }

        /* 暖心星级按钮 */
        .warmth-star-btn {
            width: 40px;
            height: 40px;
            border: none;
            background: none;
            font-size: 1.5rem;
            color: var(--neutral-300);
            transition: all var(--transition-normal);
            cursor: pointer;
        }

        .warmth-star-btn:hover,
        .warmth-star-btn.active {
            color: var(--warning-500);
        }

        /* 网格布局 */
        .grid {
            display: grid;
        }

        .grid-cols-1 {
            grid-template-columns: 1fr;
        }

        /* 间距 */
        .space-y-1 > * + * {
            margin-top: 0.25rem;
        }

        /* 渐变背景 */
        .bg-gradient-to-r {
            background-image: linear-gradient(to right, var(--bg-start), var(--bg-end));
        }

        .from-neutral-50 {
            --bg-start: var(--neutral-50);
        }

        .to-primary-50 {
            --bg-end: var(--primary-50);
        }

        /* 响应式调整 */
        @media (max-width: 640px) {
            .emoji-btn {
                width: 35px;
                height: 35px;
                font-size: 1rem;
            }
            
            .warmth-star-btn {
                width: 35px;
                height: 35px;
                font-size: 1.25rem;
            }
        }
    </style>
</body>
</html>
